<template>
  <div id="home">
    <!-- 轮播 -->
    <van-swipe :autoplay="3000" class="banner">
      <van-swipe-item v-for="(item, index) in banners" :key="index">
        <van-image lazy-load :src="item.pic" />
        <div
          class="swipe_title"
          :style="{
            backgroundColor:
              item.titleColor === 'blue' ? 'rgb(8, 95, 255)' : item.titleColor
          }"
        >
          {{ item.typeTitle }}
        </div>
      </van-swipe-item>
    </van-swipe>
    <!-- 推荐歌单 -->
    <div class="panel">
      <div class="recommend">推荐歌单</div>
      <div class="col_songList">
        <ul>
          <li style="dispaly: flex" @click="$router.push('/recommend' + item.id)" v-for="item in songList" :key="item.id">
            <van-image class="img_recommend" lazy-load :src="item.picUrl" />
            <p class="desc van-multi-ellipsis--l2">{{ item.name }}</p>
            <div class="paly_icon">
              <van-icon name="play" />
              <span>{{ item.playCount | playCount }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="panel">
      <div class="recommend">
        <p>最新音乐</p>
        <PlayAll :songData="unrealData" />
      </div>

      <van-swipe
        class="newSongSwipe"
        :loop="false"
        :show-indicators="false"
        width="auto"
      >
      <NewSong :songData="item" v-for="(item, index) in newSongList" :key="index" />
      </van-swipe>
    </div>
    <!-- 排行榜 -->
    <div class="panel">
      <div class="recommend">
        <span>排行榜</span>
        <van-button
          class="more"
          plain
          round
          size="mini"
          icon="arrow"
          icon-position="right"
          to="/leaderboard"
          >更多</van-button
        >
      </div>
      <van-swipe
        class="topList"
        :loop="false"
        :show-indicators="false"
        width="auto"
      >
        <van-swipe-item v-for="item in hotTopList" :key="item.createTime">
          <div class="topListBG">
            <van-cell-group>
              <div class="topListTitle">{{ item.name }}</div>
              <van-cell v-for="items in item.tracks" :key="items.first" center>
                <template #title>
                  <div class="van-ellipsis">
                    <span>{{ items.first }} - </span>
                    <span class="first">{{ items.second }}</span>
                  </div>
                </template>
                <template #icon>
                  <van-image
                    radius="15px"
                    class="musicAct"
                    fit="cover"
                    :src="items.picUrl"
                  />
                </template>
              </van-cell>
            </van-cell-group>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import NewSong from './components/NewSong.vue'
import PlayAll from '@/components/PlayAll'
import { getBanner } from '@/api/information.js'
import { getSongList, getNewSongList } from '@/api/recommend.js'
import { mapGetters } from 'vuex'
import { spliceArr } from '@/utils'
export default {
  name: 'Home',
  data () {
    return {
      banners: [],
      songList: [],
      unrealData: [], // 未处理的数据
      newSongList: [] // 已处理的数据
    }
  },
  // 组件注册
  components: {
    PlayAll,
    NewSong
  },
  computed: {
    ...mapGetters(['hotTopList'])
  },
  // 获取到数据和方法
  async created () {
    this.loadInfo()
    this.$store.dispatch('music/getTopList')
  },

  // 定义方法
  methods: {
    async loadInfo () {
      try {
        // 获取banner
        const res = await getBanner()
        this.banners = res.banners
        // 获取推荐
        const songListRes = await getSongList({
          limit: 6
        })
        this.songList = songListRes.result
        // 获取最新
        var { result: newSongRes } = await getNewSongList({
          limit: 12
        })

        this.newSongList = spliceArr(newSongRes, 3)
        this.unrealData.concat(...this.newSongList).forEach(item => {
          this.unrealData.push({
            name: item.name,
            artName: item.song.artists[0].name,
            picUrl: item.picUrl,
            mid: item.id,
            duration: item.song.duration
          })
        })
      } catch (err) {}
    }

  }
}
</script>

<style scoped lang="less">
#home {
  .banner {
    height: 150px;
    margin: 20px;
    border-radius: 15px;
    .van-image {
      width: 100%;
      height: 100%;
    }
    .swipe_title {
      position: absolute;
      bottom: 0px;
      right: 0px;
      font-size: 10px;
      color: #fff;
      padding: 3px 5px;
      border-radius: 10px 0 0 0;
    }
  }

  /deep/ .van-swipe__indicator--active {
    background-color: #f90000;
  }
  .panel {
    overflow: hidden;
    border-top: 1px solid #ccceee;
    background-color: #fff;
    border-radius: 10px;
    text-align: left;
    margin: 10px 0;
    .recommend {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      color: #000;
      padding: 0 20px;
      font-size: 14px;
      .more {
        text-align: center;
        padding: 2px 8px;
        color: #333;
        border: 1px solid #ccc;
      }
    }
    .topList {
      width: 300px;
      overflow: unset;
      padding: 20px 0 20px 20px;
      .topListBG {
        width: 270px;
        border-radius: 15px;
        background-color: #f3eaea;
        text-align: center;
        overflow: hidden;
      }
      .topListTitle {
        font-size: 24px;
        font-weight: 700;
        color: #625a6b;
        text-align: center;
      }
      .van-swipe-item {
        width: unset;
        span {
          color: #333;
        }
        .first {
          font-size: 12px;
        }
      }
      .van-cell-group,
      .van-cell {
        background-color: unset;
      }
    }
  }
  .newSongSwipe {
    width: 340px;
    overflow: unset;
  }
  .desc {
    font-size: 12px;
    text-align: center;
  }
  .van-col {
    margin: 10px 0;
  }
  .col_songList {
    margin: 10px 0;
    ul {
      display: flex;
      overflow-x: scroll;
      padding: 0 10px;
      li {
        position: relative;
        margin: 0 5px;
        border: 0;
        .img_recommend {
          width: 100px;
          height: 100px;
        }
        .paly_icon {
          position: absolute;
          top: 2%;
          right: 2%;
          font-size: 12px;
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 10px;
          color: #fff;
          padding: 2px 3px;
        }
      }
    }
    ul::-webkit-scrollbar {
      height: 2px;
    }
  }
}
</style>
